<template>
  <div class="pie">
    <p style="text-align: left">
      说明：这是一个双饼图的自动轮播，在内部轮播，很多东西都是可以基于此基础来进行改造的。
    </p>
    <div
      class="pieContent"
      ref="pieContent"
      style="width: 1500px; height: 800px"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      times: null
    };
  },
  beforeDestroy() {
    if (this.times) {
      clearInterval(this.times);
    }
  },
  mounted() {
    this.setPieOption();
  },
  methods: {
    setPieOption() {
      let that = this;
      const myChartDom = this.$refs.pieContent;
      let myChart = this.$echarts.init(myChartDom);
      const colorList = [
        "#02d6fc",
        "#367bec",
        "#FDD56A",
        "#FDB36A",
        "#FD866A",
        "#9E87FF",
        "#58D5FF"
      ];
      var option = {
        backgroundColor: "#fff",
        title: [
          {
            text: "YTD发货量",
            left: "22%",
            bottom: "25%",
            textStyle: {
              fontSize: 16,
              color: "#000"
            }
          },
          {
            text: "YTD收货量",
            right: "22%",
            bottom: "25%",
            textStyle: {
              fontSize: 16,
              color: "#000"
            }
          }
        ],
        // tooltip: {
        //     trigger: 'item'
        // },
        legend: {
          left: "center",
          //   y:'center',
          orient: "horizontal", //horizontal 横向  vertical 纵向
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          data: ["CDC", "RDC1", "RDC2"]
        },
        series: [
          {
            name: "通行交易介质占比",
            type: "pie",
            center: ["25%", "50%"],
            radius: ["15%", "30%"],
            // clockwise: true,
            // hoverAnimation:false,
            // avoidLabelOverlap: false,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                // 中间文字显示
                show: true,
                formatter: ["{bt|{b}}", "{bs|{c}}", "{bn|{d}%}"].join("\n"),
                rich: {
                  bt: {
                    fontSize: "16",
                    lineHeight: "20",
                  },
                  bs: {
                    fontSize: "24",
                    lineHeight: "24",
                  },
                  bn: {
                    fontSize: "18",
                    lineHeight: "18",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              {
                name: "CDC",
                value: 66,
              },
              {
                name: "RDC1",
                value: 10,
              },
              {
                name: "RDC2",
                value: 16,
              },
            ],
          },
          {
            name: "通行交易介质占比",
            type: "pie",
            center: ["75%", "50%"],
            radius: ["15%", "30%"],
            clockwise: true,
            avoidLabelOverlap: false,
            // hoverAnimation: false,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                // 中间文字显示
                show: true,
                formatter: ["{bt|{b}}", "{bs|{c}}", "{bn|{d}%}"].join("\n"),
                rich: {
                  bt: {
                    fontSize: "16",
                    lineHeight: "20",
                  },
                  bs: {
                    fontSize: "24",
                    lineHeight: "24",
                  },
                  bn: {
                    fontSize: "18",
                    lineHeight: "18",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              {
                name: "CDC",
                value: 66,
              },
              {
                name: "RDC1",
                value: 10,
              },
              {
                name: "RDC2",
                value: 16,
              },
            ],
          },
        ],
      };
      let currentIndex = -1;
      let currentIndex1 = -1;
      clearInterval(this.times);
      this.times = setInterval(() => {
        const dataLen = option.series[0].data.length;
        const dataLen1 = option.series[1].data.length;
        // 避免chart为空报错  在此重新判断一次
        if (!myChart) {
          myChart = this.$echarts.init(myChartDom);
        }
        // currentIndex = (currentIndex + 1) % dataLen;
        // currentIndex1 = (currentIndex1 + 1) % dataLen1;
        // console.log(currentIndex,'currentIndex');
        // console.log(currentIndex1,'currentIndex1');
        // that.changeAction(myChart,currentIndex,0)
        // that.changeAction(myChart,currentIndex1,1)
        // 第一个饼图图形的轮播-----------取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // console.log(currentIndex1,'currentIndex1');
        // 第二个饼图图形的轮播
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: currentIndex1,
        });
        currentIndex1 = (currentIndex1 + 1) % dataLen1;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: currentIndex1,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: currentIndex1,
        });
      }, 2000);
      
      myChart.clear();
      myChart.setOption(option);
      this.changeAction(myChart,0,0)
      // console.log(111111112222222222);
      this.changeAction(myChart,0,1)
      setTimeout(() => {
        // myChart.clear();
      },5000)
      // let index = 0
      myChart.on("mouseover", { seriesName: "通行交易介质占比" }, function (e) {
        if (e.dataIndex != index) {
          echart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });
      myChart.on("mouseout", { seriesName: "通行交易介质占比" }, function (e) {
        // that.setPieOption();
        that.times = setInterval(() => {
          const dataLen = option.series[0].data.length;
          const dataLen1 = option.series[1].data.length;
          // 避免chart为空报错  在此重新判断一次
          if (!myChart) {
            myChart = this.$echarts.init(myChartDom);
          }
          // 第一个饼图图形的轮播-----------取消之前高亮的图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          currentIndex = (currentIndex + 1) % dataLen;
          // 高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          // 显示 tooltip
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          // 第二个饼图图形的轮播
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 1,
            dataIndex: currentIndex1,
          });
          currentIndex1 = (currentIndex1 + 1) % dataLen1;
          // 高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: currentIndex1,
          });
          // 显示 tooltip
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: currentIndex1,
          });
        }, 5000);
        // index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
      });
    },
    changeAction(myChart,currentIndex,index){
        // console.log(currentIndex,'currentIndex11111111111111');
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: index,
          dataIndex: currentIndex,
        });
        
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: index,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: index,
          dataIndex: currentIndex,
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.pie {
  width: 1200px;
  margin: 0 auto;
}
</style>
